/*
 方式一: 简单抽取封装 可行但不推荐
 因为默认项目一启动就把所有的全局组件注册了, 不灵活
 */
// import Vue from 'vue'
// Vue.directive('imgerror', {
//   // 当指令绑定的元素被插入父元素的时候触发
//   // el: 指令绑定的元素  binding: 参数对象
//   inserted(el, binding) {
//     // console.log(el, binding.value, '8888++')
//     // 当图片标签加载图片失败时触发
//     el.onerror = function() {
//       // console.log('----我被触发了----')
//       el.src = binding.value
//     }
//   }
// })

/*
 方式二:
 按需导出
 main.js可以选中按需导入, 也可以选中全部导入
 */

// 1. 图片加载失败处理指令
export const imgerror = {
  inserted(el, binding) {
    // 当图片标签加载图片失败时触发
    el.onerror = function() {
      el.src = binding.value
    }
  }
}

// 2. 设置文字颜色指令
export const color = {
  inserted(el, binding) {
    el.style.color = binding.value
  }
}

